<template>
  <common-page title="字段配置">
    <el-button slot="header" @click="back">返回</el-button>

    <common-list slot="content">
      <!-- 按钮组织start -->
      <el-row slot="tools" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="edit(null)"
            v-hasPermi="['system:index:add']"
            >新增</el-button
          >
        </el-col>
      </el-row>
      <!-- 按钮组织end -->
      <common-table slot="content" v-loading="loading" :data="list">
        <el-table-column label="字段名称" align="left" prop="columnName">
          <template slot-scope="{ row }">{{ row.columnName }}</template>
        </el-table-column>

        <el-table-column label="字段别名" align="left" prop="columnAlias">
          <template slot-scope="{ row }">{{ row.columnAlias }}</template>
        </el-table-column>

        <el-table-column label="字段类型" align="left" prop="columnType">
          <template slot-scope="{ row }">{{ row.columnType }}</template>
        </el-table-column>

        <el-table-column label="时间格式" align="left" prop="dateFormat">
          <template slot-scope="{ row }">{{ row.dateFormat }}</template>
        </el-table-column>

        <el-table-column label="统计字段" align="left" prop="isStatistics">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isStatistics"
              :active-value="0"
              :inactive-value="1"
              @change="(val) => editConfig(val, row.id, 'isStatistics')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="指标字段" align="left" prop="isShow">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isShow"
              :active-value="0"
              :inactive-value="1"
              @change="(val) => editConfig(val, row.id, 'isShow')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="条件字段" align="left" prop="isSearch">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isSearch"
              :active-value="0"
              :inactive-value="1"
              @change="(val) => editConfig(val, row.id, 'isSearch')"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" width="90">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="edit(row)"
              v-hasPermi="['system:index:edit']"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="del(row.id)"
              v-hasPermi="['system:index:delete']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </common-table>

      <pagination
        slot="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getList"
      />
    </common-list>

    <editConfigDialog ref="editConfigDialog" @refresh="getList(row)" />
  </common-page>
</template>

<script>
import editConfigDialog from "./editConfigDialog.vue";
import {
  repertory_column_list,
  repertory_column_remove,
  repertory_column_edit,
} from "@/api/management/echart/repertory";
import { getColumnsByTypeList } from "@/api/management/echart/db.js";
export default {
  name: "",
  components: { editConfigDialog },
  data() {
    return {
      id: null,
      row: null,
      total: 0, // 总条数
      loading: false, // table 加载中
      list: [], // 数据列
      selectionIds: "", // 列表选中数据id
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      query: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  // 方法
  methods: {
    editConfig(val, id, key) {
      repertory_column_edit({
        id: id,
        [key]: val,
      }).then((res) => {
        this.$GlobalSuccessMessage("设置成功");
      });
    },
    /**
     * 删除
     */
    del(ids) {
      this.$GlobalDeleteConfirm().then(() => {
        repertory_column_remove({ ids: ids })
          .then((res) => {
            if (res && res.code === 200) {
              this.query.pageNum = 1;
              this.getList();
              this.$GlobalSuccessMessage("删除成功");
            } else {
              this.$GlobalErrorConfirm("删除失败", res.msg).then();
            }
          })
      }).catch(()=>{});
    },
    /**
     * 返回
     */
    back() {
      this.$emit("back");
    },
    /**
     * 获取列表
     */
    getList(row) {
      getColumnsByTypeList(row).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    /**
     * 添加/编辑
     */
    edit(row) {
      let parent = {
        indexId: this.query.indexId,
      };
      this.$refs.editConfigDialog.show(
        row ? { ...row, ...parent } : { ...parent },
        this.id
      );
    },
    show(row, id) {
      this.id = id;
      this.row = row;
      this.getList(row);
      this.query = {
        indexId: row.id,
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
